<!-- 商品管理 -->
<template>
	<view class="productColonel" :class="{'pof width100' : loading}">
		<u-sticky bgColor="#f6f6f6">
			<view class="pof skeleton f5-background" v-if="loading"></view>
			<u-tabs :current="params.dataBean.goodsType" lineWidth="50rpx" :activeStyle="activeRegimental"
				:inactiveStyle="inactiveRegimental" :list="tabsList" @click="onClickTabs"></u-tabs>
		</u-sticky>
		<view class="product">
			<view v-if="loading">
				<view class="product-for radius20 por" v-for="(item,index) in 10" :key="index">
					<view class="commodity f-background">
						<u-skeleton avatar avatarSize="200rpx" avatarShape="square" :rows="4"
							:rowsWidth="['342rpx','108rpx','168rpx','76rpx']"
							:rowsHeight="['32rpx','24rpx','24rpx','28rpx']" :loading="loading"
							:title="false"></u-skeleton>
					</view>
				</view>
			</view>
			<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
				@up="$event=> postGetUserGoodsInfos($event.num)" :toTop="{width: '100px',height: '100px'}"
				:down="{auto: false}" :up="{auto: true, textNoMore: '-已经到底啦-',empty:{use:false}}">
				<view class="product-for radius20 por" v-for="(item,index) in list" :key="index">
					<view class="shelf-label poa dis" v-if="item.isListed == 1">
						<text class="color-f size-24">上架中</text>
					</view>
					<view class="commodity f-background">
						<CommodityUnit :item="item" :loading="loading" />
					</view>
					<view class="controls f-background border-top" v-if="!loading">
						<view class="dis color3 size-30" @click="inventoryItem=item,inventoryShow=true,stock=''">
							<text class="iconfont icon-jiakucun"></text>加库存
						</view>
						<view class="listing dis color3 size-30" @click="onUnmount(index,item)">
							<view class="dis" v-if="item.isListed == 0"><text
									class="iconfont icon-shangjia size-28"></text>上架 
							</view>
							<view class="dis" v-else><text class="iconfont icon-xiajia size-28"></text>下架</view>
						</view>
						<view class="dis color3 size-30" @click="onJumpPage(item)"
							:class="{'opacity5':item.isListed == 1}">
							<text class="iconfont icon-bianji size-28"></text>编辑
						</view>
					</view>
				</view>
				<view class="default" v-if="!loading && !list.length">
					<Default tisName="暂无相关商品数据！" />
				</view>
			</mescroll-body>
		</view>
		<view class="inset-bottom" v-if="list.length"></view>
		<view class="pof app-bottom-left width100 f5-background">
			<view class="add-goods dis">
				<u-button type="primary" @click="onJumpPage()"
					:customStyle="{width: '690rpx',height: '96rpx',margin:0, borderRadius: '100rpx'}" color="#EB0000">
					<text class="iconfont icon-jia size-28"></text>
					<text class="color-f font-weight-500 size-34 margin-left-12">添加商品</text>
				</u-button>
			</view>
			<view class="inset-bottom"></view>
		</view>
		<u-popup :show="inventoryShow" :round="24" @close="inventoryShow=false">
			<view class="popup-title por dis border-bottom">
				<text class="color0 size-32">库存管理</text>
				<text class="iconfont icon-guanbi poa size-40 color3" @click="inventoryShow=false"></text>
			</view>
			<view class="popup">
				<view class="textarea-wai por border-bottom">
					<view class="color3 size-32">现有库存：
						<text class="color size-40 font-weight-600">{{inventoryItem.stock || 0}}</text>
					</view>
					<input v-model="stock" class="input size-32 color0" type="text" placeholder="请输入库存数量" />
					<view class="size-32 color6">往现有库存上叠加库存，仅当前操作是叠加库存</view>
				</view>
				<view class="commodity f-background">
					<CommodityUnit :item="inventoryItem" :loading="loading" />
				</view>
				<u-button type="primary" :disabled="disabled" @click="postGoodsInfoUpdGoods"
					:customStyle="{width: '702rpx',height: '90rpx',margin: '0 auto', borderRadius: '12rpx'}"
					color="#EB0000">
					<text class="color-f font-weight-600 size-32">确认</text>
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { GetUserGoodsInfos, UpdGoodsInfoisListed, GoodsInfoUpdGoods } from "@/api/index";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import CommodityUnit from "@/components/commodity-unit/commodity-unit";
	import { activeRegimental, inactiveRegimental } from '@/utils/style/tabs';
	import Default from "@/components/default/default";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			CommodityUnit,
			Default
		},
		data() {
			return {
				stock: '', // 库存
				inventoryItem: {},
				inventoryShow: false,
				loading: true,
				activeRegimental,
				inactiveRegimental,
				loadingList: [{ name: '' }, { name: '' }, { name: '' }, { name: '' }],
				list: [],
				tabsList: [{ name: '全部' }, { name: '团长推荐' }, { name: '粮油调味' }],
				params: {
					size: 10,
					current: 1,
					dataBean: {
						goodsType: 0, // 商品类型 0.全部 1.团长 2.粮油商品
					}
				},
				toast: false, // 加载完成是否提示
			};
		},
		onLoad() {

		},
		onShow() {
			this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
			this.canReset && this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
			this.canReset = true // 过滤第一次的onShow事件
			// this.postGetOrderList()
		},
		methods: {
			onJumpPage(item) {
				if (item && item.isListed) {
					uni.$u.toast('请先下架商品', 1500)
					return
				}
				let url = '/packageColonel/product/add-product'
				if (item && item.id) url = `${url}?id=${item.id}`
				uni.navigateTo({
					url: url
				});
			},
			// 加库存
			async postGoodsInfoUpdGoods() {
				console.log('stock', this.stock)
				if (!this.stock) {
					uni.$u.toast('请输入库存数量', 900)
					return
				}
				const param = { goodsId: this.inventoryItem.id, stock: this.stock }
				const { code, data } = await GoodsInfoUpdGoods(param)
				if (code == '200') {
					uni.$u.toast('操作成功', 900)
					this.inventoryShow = false
					setTimeout(() => {
						this.postGetUserGoodsInfos()
					}, 1000)
				}
			},
			onClickTabs(e) {
				console.log(e.index)
				this.params.dataBean.goodsType = e.index
				this.mescroll.resetUpScroll() // 重置列表数据为第一页
				this.mescroll.scrollTo(0, 0) // 滚动条也重置到顶部
			},
			// 列表
			async postGetUserGoodsInfos() {
				const _this = this
				this.params.current = this.mescroll.num
				const { code, data } = await GetUserGoodsInfos(this.params)
				if (code == '200') {
					// console.log(data.page.total,'手动阀',data.page.records.length)
					if (this.toast) uni.$u.toast('操作成功', 2000)
					_this.list = this.mescroll.num == 1 ? data.records : this.list.concat(data
						.records); //追加新数据
					this.toast = false
					setTimeout(() => {
						_this.loading = false
						_this.mescroll.endByPage(data.records.length, data.total); //必传参数(当前页的数据个数, 总页数)
					}, 1000)
				}
			},
			// 上下架接口
			async postUpdGoodsInfoisListed(id, isListed) {
				console.log('isListedisListedisListed',isListed)
				const { code, data } = await UpdGoodsInfoisListed({ goodsId: id, isListed })
				if (code == '200') {
					this.toast = true
					this.mescroll.resetUpScroll() // 重置列表数据为第一页
				}
			},
			onUnmount(index, item) {
				const _this = this
				uni.showModal({
					content: `确定${item.isListed == 1 ? '下架' : '上架'}该商品吗？`,
					success: function(res) {
						if (res.confirm) {
							// _this.list[index].isListed = item.isListed == 1 ? 0 : 1
							_this.postUpdGoodsInfoisListed(item.id, !item.isListed*1 ? 1 : 0)
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	::v-deep.productColonel {
		padding-bottom: 168rpx;
		.mescroll-body{
			min-height: calc(100vh - 116rpx - 168rpx)!important;
		}
		.skeleton {
			width: 100%;
			height: 120rpx;
			z-index: 100;
		}

		.app-bottom-left {
			z-index: 11;
		}

		.default {
			height: 80vh;
		}

		.u-tabs__wrapper__nav__line {
			transition-duration: 0 !important;
		}

		.product-for {
			margin: 0 24rpx 24rpx;

			.commodity {
				padding: 34rpx 22rpx;
			}

			.shelf-label {
				width: 60px;
				height: 20px;
				border-radius: 12px 0px 12px 0px;
				z-index: 10;
				background: linear-gradient(288deg, #EB0000 4%, #FF5F18 100%);
			}

			.controls {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				padding: 24rpx 0;

				.opacity5 {
					opacity: .5;
				}

				.iconfont {
					margin-right: 18rpx;
				}

				.listing {
					border-left: 1px solid rgba(0, 0, 0, 0.05);
					border-right: 1px solid rgba(0, 0, 0, 0.05);
				}
			}
		}

		// 弹窗
		.popup-title {
			height: 110rpx;

			.icon-guanbi {
				right: 24rpx;
			}
		}

		.popup {
			padding: 40rpx 24rpx 44rpx;

			.textarea-wai {
				padding-bottom: 40rpx;
			}

			.commodity {
				padding: 40rpx 0;
			}

			// 文本域
			.input {
				width: 100%;
				height: 110rpx !important;
				background: #F6F6F6;
				box-sizing: border-box;
				padding: 0 24rpx;
				margin: 32rpx 0 40rpx;
			}
		}

		// 导航
		.u-tabs__wrapper__nav__item {
			width: 33.33%;
			padding: 0 !important;
		}

		.u-tabs__wrapper__nav__item {
			height: 116rpx !important;
		}

		.u-tabs__wrapper__nav__line {
			height: 8rpx !important;
			border-radius: 100rpx !important;
			background: #EB0000 !important;
			bottom: 20rpx !important;
		}

		// 按钮部分
		.add-goods {
			height: 168rpx;
		}
	}
</style>